<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>向上飘动并消失的动画</title>  
<style>
    /* styles.css */  
.floating-box {  
  width: 20px; /* 设置你想要的宽度 */  
  height: 20px; /* 设置你想要的高度 */  
  /* background-color: #f00; 设置背景色为红色   */
  
  position: relative; /* 为了使用 top 属性 */  
  top: 100px; /* 初始位置 */  
  transition: top 2s ease; /* 过渡效果：顶部位置变化1秒，缓动函数 */  
  animation: fadeOut 1s 2s forwards; /* 动画效果：1秒后淡出，持续1秒，动画结束后保持最后一帧的状态 */  
  opacity: 1; /* 初始不透明度 */  
}  
  
.floating-box.animate {  
  top: -20px; /* 最终位置：向上飘动20px */  
}  
  
@keyframes fadeOut {  
  0% {  
    opacity: 1;  
  }  
  100% {  
    opacity: 0;  
  }  
}

.user-card {  
  width: 200px;  
  border: 1px solid #ccc;  
  border-radius: 5px;  
  overflow: hidden;  
  margin: 10px;  
}  
  
.avatar {  
  width: 100%;  
  padding-top: 100%;  
  position: relative;  
  background-color: #f5f5f5;  
}  
  
.avatar img {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  width: 80%;  
  height: 80%;  
  border-radius: 50%;  
  object-fit: cover;  
}  
  
.user-info {  
  padding: 10px;  
}  
  
.username {  
  margin: 0;  
  font-weight: bold;  
}  
  
.other-info {  
  margin-top: 5px;  
  font-size: 14px;  
  color: #666;  
}
</style>
</head>  
<body>  
  
<div class="floating-box">+1</div>  


<div class="user-card">  
    <div class="avatar">  
      <img src="path_to_your_image.jpg" alt="User Avatar">  
    </div>  
    <div class="user-info">  
      <h2 class="username">用户名</h2>  
      <p class="other-info">其他信息</p>  
    </div>  
  </div>
  
<script>  
  // 可选的JavaScript代码，用于在加载页面时立即触发动画  
  window.onload = function() {  
    const floatingBox = document.querySelector('.floating-box');  
    floatingBox.classList.add('animate');  
  };  
</script>  
  
</body>  
</html>